<template>
  <div class="playPanelContainer">
    <div class="playPanelLeft">
      <div class="songCover">
        <img :src="playerStore?.song?.al?.picUrl" alt="" />
      </div>
      <div class="songInfos">
        <div class="songName">
          <div class="scrollContent" ref="listenDom">
            {{ playerStore?.song?.name }}
          </div>
        </div>
        <div class="songCreators">
          <div class="scrollContent">
            {{ formatCreators(playerStore?.song?.ar) }}
          </div>
        </div>
      </div>
    </div>
    <div class="playPanelCenter">
      <div class="panelBtns">
        <SvgIcon
          icon-name="iconshangyishou"
          :size="24"
          class-name="panelIcon"
          @icon-click="playerStore.playPrev()"
        ></SvgIcon>
        <div class="bgBtn">
          <SvgIcon
            v-if="playerStore.isPause"
            icon-name="iconbofang"
            color="#333"
            :size="20"
            @icon-click="playerStore.setPlay()"
          ></SvgIcon>
          <SvgIcon
            v-if="!playerStore.isPause"
            icon-name="iconzanting"
            color="#333"
            :size="20"
            @icon-click="playerStore.setPause()"
          ></SvgIcon>
        </div>

        <SvgIcon
          icon-name="iconxiayishou"
          class-name="panelIcon"
          :size="24"
          @icon-click="playerStore.playNext()"
        ></SvgIcon>
      </div>
      <div class="playProgress">
        <div class="nowTime">{{ currentTimed }}</div>
        <div class="progressBar">
          <el-slider
            :size="'small'"
            v-model="currentTime"
            @change="playerStore.onSliderChange"
            @input="playerStore.onSliderInput"
            :show-tooltip="false"
            :max="duration"
          />
        </div>
        <div class="songLength">
          {{ songLength }}
        </div>
      </div>
    </div>
    <div class="playPanelRight">
      <div class="playRightItem mr-15">
        <SvgIcon
          icon-name="iconsound"
          v-if="volume"
          :size="20"
          @icon-click="playerStore.toggleMute(true)"
        ></SvgIcon>
        <SvgIcon
          icon-name="iconsoundoff"
          v-if="!volume"
          :size="20"
          @icon-click="playerStore.toggleMute(false)"
        ></SvgIcon>
        <div class="verticalSlider">
          <div class="innerPolygon">
            <el-slider
              vertical
              v-model="volume"
              :show-tooltip="false"
              @input="playerStore.setVolume"
              height="85px"
            ></el-slider>
          </div>
        </div>
      </div>
      <div class="playRightItem" @click="playerStore.togglePlayList">
        <SvgIcon icon-name="icon24gf-playlist" :size="20"></SvgIcon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, onUnmounted, watch } from "vue";
import { usePlayerStores } from "@/stores/player";
import { formatCreators, formatDt } from "@/utils/utils";
import { storeToRefs } from "pinia";
import useAutoScroll from "@/hooks/useAutoScroll";

const { listenDom } = useAutoScroll("hornzital");
const playerStore = usePlayerStores();
const { currentTime, duration, volume, ended } = storeToRefs(playerStore);

// 时长
const songLength = computed(() => {
  return formatDt(playerStore?.song?.dt);
});

// 进度
const currentTimed = computed(() => {
  return formatDt(playerStore?.currentTime * 1000);
});

onMounted(() => {
  playerStore.init();
});

onUnmounted(() => {
  playerStore.cancelInteral();
});

// 播放结束
watch(ended, (val) => {
  if (!val) {
    return;
  }
  playerStore.playEnd();
});
</script>

<style lang="less">
.playPanelContainer {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  justify-content: space-between;
  align-items: center;
  .playPanelLeft {
    display: flex;
    padding-left: 14px;

    .songCover {
      border-radius: 6px;
      overflow: hidden;
      height: 48px;
      width: 48px;
      img {
        width: 48px;
        height: 48px;
      }
    }
    .songInfos {
      margin-left: 10px;

      .songName {
        color: #666;
        height: 50%;

        width: 160px;
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        .scrollContent {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
        }
      }
      .songCreators {
        color: #333;
        font-size: 14px;
        height: 50%;

        width: 160px;
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        .scrollContent {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
        }
      }
    }
  }
  .playPanelCenter {
    width: 460px;
    .panelBtns {
      display: flex;
      justify-content: center;

      align-items: center;
      .bgBtn {
        width: 36px;
        height: 36px;
        border-radius: 18px;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 28px;
        cursor: pointer;
        &:hover {
          background-color: #ddd;
        }
      }
      .panelIcon {
        margin-right: 28px;
        cursor: pointer;
        &:hover {
          fill: var(--primary-color) !important;
        }
      }
    }
    .playProgress {
      height: 18px;
      display: flex;
      .nowTime {
        color: #ccc;
        width: 46px;
        text-align: center;
        font-size: 14px;
      }
      .progressBar {
        width: calc(100% - 92px);
        padding: 0 10px;
      }
      .songLength {
        color: #ccc;
        width: 46px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
  .playPanelRight {
    display: flex;
    padding-right: 20px;
    .playRightItem {
      position: relative;
      height: 54px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        .verticalSlider {
          display: block;
        }
      }
      .verticalSlider {
        display: none;
        position: absolute;
        left: 50%;
        border-radius: 6px;
        transform: translateX(-50%);
        width: 36px;
        bottom: 48px;
        height: 96px;
        box-shadow: 0 0 7px 0.5px rgba(0, 0, 0, 0.15);
        z-index: 10;
        .innerPolygon {
          position: absolute;
          left: 0;
          top: 0;
          width: 36px;

          height: 102px;
          background-color: #fff;
          // "M 0 6 Q 0 0 6 0 L 30 0 Q 36 0 36 6 L 36 90 Q 36 96 30 96 L 20 96 L 18 102 L 16 96 L 6 96 Q 0 96 0 90 L 0 6"
          clip-path: path(
            "M 0 6 Q 0 0 6 0 L 30 0 Q 36 0 36 6 L 36 90 Q 36 96 30 96 L 20 96 L 18 102 L 16 96 L 6 96 Q 0 96 0 90 L 0 6"
          );
        }
      }
    }
  }
  .el-slider {
    height: 18px;
    .el-slider__button {
      height: 14px;
      width: 14px;
      border-color: var(--primary-color);
    }
    .el-slider__bar {
      background-color: var(--primary-color);
    }
  }
}
</style>
